<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="110">
          <FormItem label="初始值">
            <Input size="small" v-model="initValue" placeholder=""/>
          </FormItem>
          <FormItem label="背景色">
            <PnColorPicker size="small" v-model="backgroundColor" alpha recommend/>
          </FormItem>
          <FormItem label="行数">
            <InputNumber size="small" :max="1000" :min="1" v-model="rowsNum"></InputNumber>
          </FormItem>
          <FormItem label="列数">
            <InputNumber size="small" :max="1000" :min="1" v-model="colsNum"></InputNumber>
          </FormItem>
          <FormItem label="选择类型">
            <Tooltip content="多选模式下无法触发内置交互流" placement="left" max-width="200" style="width: 100px;">
              <Select :transfer="true" size="small" v-model="selectType">
                <Option v-for="item in selectTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Tooltip>
          </FormItem>
          <FormItemPanel title="定时轮询">
            <Alert show-icon :style="{paddingRight: '10px'}">定时轮询功能只应用于单选模式，请在预览模式下查看效果</Alert>
            <FormItem label="开启">
              <i-switch v-model="useCarousel">
                <span slot="open"></span>
                <span slot="close"></span>
              </i-switch>
            </FormItem>
            <FormItem label="时间间隔">
              <InputNumber size="small" :max="1000" :min="1" v-model="carouselDuration" :active-change="false"></InputNumber> 秒
            </FormItem>
          </FormItemPanel>

          <FormItemPanel title="标签项配置">
            <FormItem label="默认背景色">
              <PnColorPicker size="small" v-model="tabItemStyle.backgroundColor" alpha recommend/>
            </FormItem>
            <FormItem label="默认字体颜色">
              <PnColorPicker size="small" v-model="tabItemStyle.color" alpha recommend/>
            </FormItem>
            <FormItem label="字体大小">
              <InputNumber size="small" :max="1000" :min="12" v-model="tabItemStyle.fontSize" :active-change="false"></InputNumber> px
            </FormItem>
            <FormItem label="边框宽度">
              <InputNumber size="small" :max="1000" :min="0" v-model="tabItemStyle.borderWidth" :active-change="false"></InputNumber> px
            </FormItem>
            <FormItem label="边框类型">
              <Select :transfer="true" size="small" v-model="tabItemStyle.borderStyle">
                <Option v-for="item in $PnDict.borderStyles" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem label="边框颜色">
              <PnColorPicker size="small" v-model="tabItemStyle.borderColor" alpha recommend/>
            </FormItem>
            <FormItem label="圆角">
              <InputNumber size="small" :max="1000" :min="0" v-model="tabItemStyle.borderRadius" :active-change="false"></InputNumber> px
            </FormItem>
            <FormItem label="鼠标悬浮背景色">
              <PnColorPicker size="small" v-model="tabItemStyle.backgroundColorHover" alpha recommend/>
            </FormItem>
            <FormItem label="选中状态背景色">
              <PnColorPicker size="small" v-model="tabItemStyle.backgroundColorActive" alpha recommend/>
            </FormItem>
            <FormItem label="选中状态文字颜色">
              <PnColorPicker size="small" v-model="tabItemStyle.colorActive" alpha recommend/>
            </FormItem>
          </FormItemPanel>

        </Form>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="TabListComp"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="点击标签项时触发">
            <InteractionSender :interactionKey="'itemClick'"></InteractionSender>
            <Alert show-icon>通过value可获取选中值数组</Alert>
            <CodeEditor v-model="tabItemClickCode"></CodeEditor>
          </FormItemPanel>

        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'TabListCompForm', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompFormMixin],
    data() {
      return {
        selectTypes: [
          {
            label: '单选',
            value: 'radio'
          },
          {
            label: '多选',
            value: 'checkbox'
          }
        ]
      }
    },
    mounted() {

    },
    methods: {

    },
    computed: {
      ...mapFields({

        rowsNum: 'component.compConfigData.rowsNum',
        colsNum: 'component.compConfigData.colsNum',
        backgroundColor: 'component.compConfigData.backgroundColor',
        selectType: 'component.compConfigData.selectType',
        initValue: 'component.compConfigData.initValue',

        useCarousel: 'component.compConfigData.useCarousel',
        carouselDuration: 'component.compConfigData.carouselDuration',

        tabItemStyle: 'component.compConfigData.tabItemStyle',

        tabItemClickCode: 'component.compConfigData.tabItemClickCode'

      })
    }
  }
</script>

<style scoped>

</style>
